<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="include/common-header :: common_header(~{::title},~{::link})">
    <title>预算导入</title>
</head>
<body class="gray-bg">

<!--页面内容开始-->
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-md-12">
            <div class="ibox ">
                <div class="ibox-content">

                    <div id="wizard">
                        <h1>上传待导入文件</h1>
                        <section class="step-content budgetUpload" data-mode="iframe"
                                 data-url="/web/budget/tbudgetinfodetail/block/budgetUpload">
                        </section>

                        <h1>处理数据</h1>
                        <section class="step-content">
                            <div class="row animated fadeInRight">
                                <div class="col-6">
                                    <div class="ibox ">
                                        <div class="ibox-title">
                                            <h5>未匹配到系统中的部门</h5>
                                        </div>
                                        <div class="ibox-content">
                                            <div class="scroll_content">
                                                <ol id="inportDetail_dept">

                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="ibox ">
                                        <div class="ibox-title">
                                            <h5>未匹配到系统中的项目</h5>
                                            <div class="ibox-tools">
                                                <a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="saveProjectAll()">
                                                    全部新增
                                                </a>
                                            </div>
                                        </div>
                                        <div class="ibox-content">
                                            <div class="scroll_content">
                                                <ol id="inportDetail_project">

                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </section>

                        <!--<h1>导入预算</h1>
                        <section class="step-content">
                            <div class="text-center m-t-md">
                                <form id="importDetail_remarkForm">
                                    <div class="form-group row"><label class="col-lg-2 col-form-label">备注</label>
                                        <div class="col-lg-10"><textarea id="importDetail_remark" placeholder="请输入备注"
                                                                         class="form-control"></textarea>
                                        </div>
                                    </div>
                                </form>
                                <button type="button" class="btn btn-w-m btn-default" onclick="saveAll()">导入</button>
                            </div>
                        </section>-->

                        <!--<h1>上传结果</h1>
                        <section class="step-content">
                            <div class="text-center m-t-md">

                            </div>
                        </section>-->
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!--弹窗：编辑部门信息-->
<div class="modal inmodal fade" id="importDetail_deptModal" tabindex="-1" role="dialog" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">编辑部门信息</h4>
                <small class="font-bold"></small>
            </div>
            <div class="modal-body">
                <form id="importDetail_deptForm">
                    <input type="hidden" id="importDetail_dept_old">
                    <div class="form-group row"><label class="col-lg-2 col-form-label">部门名称</label>
                        <div class="col-lg-10"><input id="importDetail_dept" placeholder="请输入部门名称" class="form-control">
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveDept()">保存更改</button>
            </div>
        </div>
    </div>
</div>
<div th:replace="include/common-js :: common_js"></div>
<script type="text/javascript">
    $(document).ready(function () {
        budgetinfodetailImportObj.myWizard = $("#wizard").steps({
            bodyTag: "section",
            transitionEffect: "fade",
            labels: {
                cancel: "Cancel",
                current: "current step:",
                pagination: "Pagination",
                finish: "导入",
                next: "下一步",
                previous: "上一步",
                loading: "加载中 ..."
            },
            onStepChanging: function (event, currentIndex, newIndex) {
                if (newIndex < currentIndex) {
                    return true;
                }
                if (currentIndex == 0) {
                    return budgetinfodetailImportObj.uploadSuccess;
                } else if (currentIndex == 1) {
                    return budgetinfodetailImportObj.deptSuccess && budgetinfodetailImportObj.projectSuccess;
                } else {

                }
            },
            onStepChanged: function (event, currentIndex, priorIndex) {
                if (currentIndex == 0) {
                    $(".budgetUpload").find("iframe").height($(".budgetUpload").find("iframe").contents().height())
                }
            },
            onFinishing: function (event, currentIndex) {
                // 进行一些校验
                return budgetinfodetailImportObj.deptSuccess && budgetinfodetailImportObj.projectSuccess;
            },
            onFinished: function (event, currentIndex) {
                saveAll();
            }
        });

        $(".budgetUpload").find("iframe").on("load", function (event) {//判断 iframe是否加载完成
            $(this).height($(this).contents().height())
        });

        $('#importDetail_deptModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var dept = button.data('dept')
            var modal = $(this)
            modal.find('.modal-body input').val(dept)
        })

        $('.scroll_content').slimscroll({
            height: '200px'
        })
    });

    var budgetinfodetailImportObj = new Object({
        uploadSuccess: false,
        deptSuccess: false,
        projectSuccess: false,
        myWizard: undefined
    });

    /**
     * 导入文件上传后的回调
     * @param success
     * @param msg
     */
    function uploadOver(success, msg) {
        if (success) {
            budgetinfodetailImportObj.uploadSuccess = true;
            getNoDept();
            getNoProject();
            $("#wizard").steps("next");
        } else {
            swal({
                title: "操作失败",
                text: msg,
                type: "error",
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确定",
                closeOnConfirm: false
            });
        }
    }

    function getNoDept() {
        budgetinfodetailImportObj.deptSuccess = false;
        $.get("/budget/tbudgetinfodetail/noDepts", {}, function (data) {
            if (data.code == 0) {
                $('#inportDetail_dept').empty();
                if (data.data.length == 0) {
                    budgetinfodetailImportObj.deptSuccess = true;
                } else {
                    data.data.map(o => {
                        $(`<li style="display: flex; justify-content: space-between"><span>${o}</span><a href="javascript:" data-toggle="modal" data-target="#importDetail_deptModal" data-dept="${o}"><i class="fa fa-edit" aria-hidden="true"></i></a></li>`).appendTo($('#inportDetail_dept'));
                    })
                }
            }

        })
    }

    function getNoProject() {
        budgetinfodetailImportObj.projectSuccess = false;
        $.get("/budget/tbudgetinfodetail/noProjects", {}, function (data) {
            if (data.code == 0) {
                $('#inportDetail_project').empty();
                if (data.data.length == 0) {
                    budgetinfodetailImportObj.projectSuccess = true;
                } else {
                    data.data.map(o => {
                        $(`<li>${o}</li>`).appendTo($('#inportDetail_project'));
                    })
                }
            }
        })
    }

    function saveDept() {
        let deptOld = $("#importDetail_deptForm").find("#importDetail_dept_old").val()
        let dept = $("#importDetail_deptForm").find("#importDetail_dept").val()
        $.post("/budget/tbudgetinfodetail/saveDept", {deptOld: deptOld, dept: dept}, function (data) {
            if (data.code == 0) {
                $('#importDetail_deptModal').modal('hide')
                getNoDept();
            } else {
                swal({
                    title: "操作失败",
                    text: data.msg,
                    type: "error",
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    closeOnConfirm: false
                });
            }
        })
    }

    function saveProjectAll() {
        $.post("/budget/tbudgetinfodetail/saveProjectAll", {}, function (data) {
            if (data.code == 0) {
                getNoProject();
            }
        })
    }

    function saveAll() {
        let remark = $("#importDetail_remarkForm").find("#importDetail_remark").val()
        $.post("/budget/tbudgetinfodetail/saveAll", {remark: remark}, function (data) {
            if (data.code == 0) {
                swal({
                    title: "操作提示",
                    text: '导入成功',
                    type: "success",
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定",
                    closeOnConfirm: true
                }, function () {
                    budgetinfodetailImportObj.uploadSuccess = false;
                    budgetinfodetailImportObj.deptSuccess = false;
                    budgetinfodetailImportObj.projectSuccess = false;
                    budgetinfodetailImportObj.myWizard.steps("previous");
                });
            }
        })
    }


</script>
</body>
</html>